<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="//at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<!--
<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
-->
<script type='text/javascript' src='__JS__/jquery.min.js'></script>
<script type='text/javascript' src='__JS__/layer_mobile/layer.js'></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<title>{$data.agent.agentname}的小店</title>
<style>
::-webkit-scrollbar { width: 12px !important; height: 12px !important; }::-webkit-scrollbar-track:vertical {  }::-webkit-scrollbar-thumb:vertical { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } ::-webkit-scrollbar-track:horizontal {  }::-webkit-scrollbar-thumb:horizontal { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } ::-webkit-resizer { display: none !important; }

*{ margin:0; padding:0; list-style:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }
html{ font-size:16px; }
body{ background:#ffffff; overflow:hidden; font-family: Microsoft YaHei,Helvetica!important; }
a{ -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration:none; }
.iconfont { font-size: 32px; }
.shop-list{ display:flex; overflow:hidden;height: 100vh; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.shop-list-agent-notice{ padding:20px; font-size: 24px!important;line-height: 44px; border-bottom: 1px solid #edeef0!important; color: #fa6f60!important; }
@keyframes g-slideUpEnter{
	0%{
		-webkit-transform:translateY(100%);transform:translateY(100%)
	}
	to{
		-webkit-transform:translate(0);transform:translate(0)
	}
}
.shop-list-total-box { position:fixed; width:100%; line-height:88px; z-index: 10; bottom:0;left:0; background: #fff; -webkit-animation: g-slideUpEnter .5s ease; animation: g-slideUpEnter .5s ease;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-shadow: 0 -1px 9.9px 0.1px rgba(0,0,0,.05);
    box-shadow: 0 -1px 9.9px 0.1px rgba(0,0,0,.05);
}
.shop-list-total{
	padding-left: 20px; -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
	font-size: 28px!important;
}
.g-orange-dark{ font-weight: 400;
    font-style: normal;
    display: inline-block;
	color: #ef3528!important;

}
.g-1of2 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}
.g-bg-orange {
    background: #fa6f60;
	color:#ffffff;
	font-size: 28px!important;
}
.g-reset b, .g-reset em, .g-reset i, .g-reset span {
    font-weight: 400;
    font-style: normal;
    display: inline-block;
}
.g-pd-lr {
    padding-left: 15px;
    padding-right: 15px;
}
.g-fs-28 {
    font-size: 28px!important;
}
.g-fd-c {
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.shop-list-left{ 
	-webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
	background: #f5f6f7;
}
.shop-list-right{ 
	-webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
}
.shop-list-main{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
	overflow:hidden; 
	flex-flow: nowrap;
	-webkit-flex-flow:nowrap;
}
.shop-list-class{}
.shop-list-class-item{
	border-bottom:1px solid #d9d9d9; border-left:5px solid #f5f6f7; text-align:center;
    min-height: 100px;
}
.shop-list-class-active{ border-left: 5px solid #5c8dff; background:#ffffff; }
.shop-list-class-item img{ max-width: 80px!important; width: 80px!important; height: 80px!important; line-height: 80px!important; border: 1px solid #dbdbdb; margin-top: 12px; }
.shop-list-class-item p{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	text-align: center;
    line-height: 50px;
	-webkit-line-clamp: 1;
	font-size: 26px!important;
	color:#2e3136;
}
._nav-name {
    line-height: 30px;
    color: #5c8dff;
    background: #f6f6f6;
    font-size: 26px;
    padding: 15px 20px;
}
._nav-name span{
	padding: 0 20px;
	border-left: 4px solid #5c8dff;
	font-weight: 400;
    font-style: normal;
    display: inline-block;
}
.shop-list-goods-box{
	padding:20px 10px 20px 20px;
}
.shop-list-goods-pic{ width:140px; height:140px; float:left; }
.shop-list-goods-pic img{ width:100%; height:100%; }
.shop-list-goods-info{ margin-left:160px; }
.shop-list-goods-info h1{ overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2;word-break: break-all;
    word-wrap: break-word;font-size: 26px!important; font-weight:normal; line-height:44px; }
.shop-list-goods-info h1 a{ color:#2e3136; }
.shop-list-goods-price{ line-height:44px; color: #ef3528!important; font-size: 28px!important; margin-right: 10px; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; display:inline-block; }
.shop-list-goods-stock{ line-height:44px; display:inline-block; font-size: 22px!important; color:#9c9fa6!important; }
.shop-list-goods-stock span{
 font-weight: 400; font-style: normal; display: inline-block; border-radius: 40px;
    padding: 0px 10px; line-height: 36px; background:#5c8dff;; color:#ffffff; margin-right: 10px; font-size: 22px!important;
}
.shop-list-goods-fix{
	position: absolute!important;right:0; min-width: 220px; max-width: 290px;border: none;
    background: rgb(255, 255, 255);
}
.shop-list-goods-reduce{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: #5ba2e4;
}
.shop-list-goods-reduce:after {
    content: "\E685";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    color: #999;
}
.shop-list-goods-amount{
	float: left;
    width: 98px;
    color: #333;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background-color: #fff;
    padding: 0 15px;
	border: 1px solid rgb(232, 232, 232);
    background: rgb(241, 241, 241);
	-webkit-appearance:none;
	outline:0;
}
.shop-list-goods-add{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: transparent!important;
	font-weight: 400;
    font-style: normal;
    display: inline-block;
}
.shop-list-goods-add:after {
    content: "\E71E";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    color: #1b9af9;
    top: 0;
    left: 0;
}
.shop-list-goods{ display:none; }
.shop-list-goods-active{ display:block; }
</style>
</head>
<body>
<div class='shop-list'>


<div class='shop-list-main g-fd-c'>
	<div class='shop-list-left'>
		<div class='shop-list-class'>
			{volist name='data.productype' id='v' key='k'}
			<div class='shop-list-class-item{if condition="$k eq 1"} shop-list-class-active{/if}' data-class-id='{$v.producttypeid}'>
				<img src='{$v.image}'>
				<p>{$v.productname}</p>
			</div>
			{/volist}
		</div>
	</div>
	<!--/shop-list-left-->
	
	<div class='shop-list-right' style='overflow-y: scroll;'>
	
		{volist name='data.productype' id='v' key='k'}
		<!--一个分类开始-->
		<div class="shop-list-goods {if condition='$k eq 1'}shop-list-goods-active{/if}" data-class-id='{$v.producttypeid}'>
			<p class="_nav-name"><span>{$v.productname}</span></p>
			
			{volist name='v.product' id='y' key='x'}
			<div class='shop-list-goods-one' data-id='{$y.productid}' data-tmp-price='{$y.productprice}'>
				<div class='shop-list-goods-box'>
					<div class='shop-list-goods-pic'>
						<a href="{:url('Shop/detail',['id'=>$y['productid']])}"><img src='{$y.productmainimg}'></a>
					</div>
					<div class='shop-list-goods-info'>
						<h1><a href="{:url('Shop/detail',['id'=>$y['productid']])}">{$y.productname}</a></h1>
						<div style='padding-top:10px;'>
							<p class='shop-list-goods-price'>&yen;{$y.productprice}</p>
							<p class='shop-list-goods-stock'><span style='background:#fff;color: #9c9fa6;text-decoration: line-through;'>&yen;{$y.agentprice}</span>库存：{$y.productnumber}</p>
						</div>
						<div style='height:60px; position:relative;'>
							<div class='shop-list-goods-fix'>
								<div class='shop-list-goods-reduce'{if condition="$y.buynum lt 1"} style='visibility:hidden;'{/if}><i class='iconfont icon-minus'></i></div>
								<input type='text' data-goods-id="{$y.productid}" class='shop-list-goods-amount' value='{$y.buynum}' readonly>
								<div class='shop-list-goods-add'><i class='iconfont icon-add'></i></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--/一个商品-->
			{/volist}
			
		</div>
		<!--/shop-list-goods 一个分类完毕-->
		{/volist}
		

		
	</div>
	<!--/shop-list-right-->
	
</div>
<!--/shop-list-main-->

<div style='height:90px;'></div>

<style>
.c-share-back {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 200px;
    z-index: 9;
    padding-left: 50px;
}
.c-share-back .__content {
    float: left;
    width: 70px;
}
.c-share-back .__icon {
    float: right;
    border-radius: 100%;
    text-align: center;
    background: rgba(0,0,0,.5);
    line-height: 70px;
    height: 70px;
    width: 70px;
    margin-top: -70px;
    color: #fff;
    font-size: 50px;
}
.icon-goback:before {
    content: "\e7a1";
}

.layui-layer-loading .layui-layer-content{ width:120px; height:48px; background-size:cover; }
.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}
.layui-m-layer2 .layui-m-layercont i{ background:#5c8dff; }

</style>
<div class="c-share-back"><div class="__content"><i class="iconfont icon-goback __icon"></i></div></div>



<!-----跨店提示----->
<style>
@-webkit-keyframes g-fadeEnter{
	0%{opacity:0}to{opacity:1}
}
@keyframes g-fadeEnter{0%{opacity:0}to{opacity:1}}

@-webkit-keyframes g-zoomEnter{
0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0)}to{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}
}
@keyframes g-zoomEnter{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0)}to{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}
}
.zz{ position:fixed; width:100%; height:100%; left:0; top:0; z-index:1000; }
.zz-bg{ position: fixed; width: 100%; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 10; height: 100%; -webkit-animation: g-fadeEnter .4s ease; animation: g-fadeEnter .4s ease;}
.zz-box{     position: fixed;
    z-index: 50;
    background: #fff;
    left: 50%;
    top: 50%;
    width: 550px;
    border-radius: 8px;
    -webkit-transform: translate(-50%,-50%) scale(1);
    -ms-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);
    -webkit-animation: g-zoomEnter .2s cubic-bezier(.18,.89,.32,1.28);
    animation: g-zoomEnter .2s cubic-bezier(.18,.89,.32,1.28);      padding-left: 15px;
    padding-right: 15px;     overflow-y: auto;
    padding-bottom: 20px;
    width: 80%;
    max-height: 75%;
    border-radius: 20px;
	
}
.zz-title{ border-bottom: 1px solid #edeef0!important;     font-size: 34px!important; padding: 20px;text-align: -webkit-center!important;}
.zz-body{ display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;    -webkit-box-orient: vertical;
}
.zz-content{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	-webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	-webkit-box-orient: vertical;
	font-size: 28px!important;
}
.zz-confirm{
	display: block;
    color: #fff;
    margin: auto;
    width: 80%;
    font-size: 28px;
    padding: 20px;
    border-radius: 44px;
    text-align: center;
	background-color: #5c8dff;
	margin-bottom: 20px;
	margin-top: 40px;
}

.layui-layer-loading .layui-layer-content{ width:120px; height:48px; background-size:cover; }

.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}
.layui-m-layer2 .layui-m-layercont i{ background:#5c8dff; }

</style>

<div class="zz" id="zz_tips" data-desc="弹窗1" {if condition="$data.tips eq ''"}style="display:none"{else /}{/if}>
	<div class="zz-bg"></div>
	<div class="zz-box">
		<p class="zz-title">提示</p>
		<div class="zz-body">
			<div class='zz-content'>
				<div style='padding:20px 0;'>
				<p style='color:#ef3528!important'>{$data.tips}</p>
				</div>
			</div>
			<div class="zz-confirm" onclick="AjaxJson('{:url('Shop/cancelkdts')}');document.getElementById('zz_tips').style.display='none'">确认</div>
		</div>
	</div>
</div>
<script>
</script>
<!-----/跨店提示----->



<div class='g-reset shop-list-total-box'>
	<div class='shop-list-total'>合计：<span class="g-orange-dark">￥<span id='totalprice'>{$data.total_price}</span></span></div>
	<div class='shop-list-count'>
		<div class="g-1of2 g-tc g-bg-orange" onclick="location.href='{:url('Shop/cart')}'"><span class="iconfont icon-cart1 g-pd-lr"></span>进货车（<span id='totalA'>{$data.total_num}</span>）</div>
	</div>
</div>



</div>

<script>
$(function(){
	//+
	$('.shop-list-goods-add').click(function(){
		var goods_id = $(this).parents('.shop-list-goods-one').eq(0).attr('data-id');
		UpdateAmount(goods_id,true);
	});
	//-
	$('.shop-list-goods-reduce').click(function(){
		var goods_id = $(this).parents('.shop-list-goods-one').eq(0).attr('data-id');
		UpdateAmount(goods_id,false);
	});
	//切换分类
	$('.shop-list-class-item').click(function(){
		$(this).addClass('shop-list-class-active').siblings('.shop-list-class-item').removeClass('shop-list-class-active');
		
		let class_id = $(this).attr('data-class-id');
		
		$(".shop-list-goods[data-class-id='"+class_id+"']").addClass('shop-list-goods-active').siblings('.shop-list-goods').removeClass('shop-list-goods-active');
	});
});

//更改数量
function UpdateAmount(goods_id,is_add){
	
	let goodsIDS = new Array();
	let amountIDS = new Array();
	$(".shop-list-goods-amount").each(function(){
		let gid = $(this).attr('data-goods-id');
		var curr = parseInt($(this).val());
		
		if(gid != goods_id){
			if(curr == 0){
				return true;
			}
			goodsIDS.push(gid);
			amountIDS.push(curr);
			return true;
		}
		
		//操作量的这个
		curr = isNaN(curr) ? 0 : curr;
		curr = is_add ? curr + 1 : curr - 1;
		curr = curr < 0 ? 0 : curr;
		
		goodsIDS.push(gid);
		amountIDS.push(curr);
	});
	
	let lindex = layer.open({type:2,shade:false});
	
	$.ajax({
		url : "{:url('Shop/cart_add')}",
		type : 'POST',
		dataType : 'JSON',
		data : {'goods_id':goodsIDS.join(','),'amount':amountIDS.join(',')},
		success : function(e){
			if(!e.flag){
				layerMsg(e.info);
			}else{
				for(let i=0;i<e.data.list.length;i++){
					let _inp = $("input[data-goods-id='"+e.data.list[i].productid+"']");
					$(_inp).val(e.data.list[i].buynum);
					if(e.data.list[i].buynum > 0){
						$(_inp).prev().css('visibility','visible');
					}else{
						$(_inp).prev().css('visibility','hidden');
					}
				}
				$('#totalprice').html(e.data.total_price);
				$('#totalA').html(e.data.total_amount);
			}
		},error : function(){
		},complete : function(){
			layer.close(lindex);
		}
	});
	
}

</script>
</body>
</html>